<template>
	<view class="conpage">
		<uni-nav-bar :statusBar="true" :fixed="true" :border='false' color="#113A62" backgroundColor="#E3EDF7" left-icon="back"
			 title="使用安全" @clickLeft="back"/>
		<scroll-view scroll-y class="scroll-content" style="height: calc(100% - 78px);overflow-y: auto;marginTop: 0px"  @touchmove.stop>
			<view class="use_top">
				<view v-for="(e,index) in dataList[1]" style="width: 100%;padding: 0 16px;box-sizing: border-box;">
					<view class="dateSty">{{e.date}}</view>
					<view v-for="(item,indexs) in e.list" class="useAll">
						<view style="display: flex;justify-content: space-between;">
							<view>
								<image class="use_img" src="../../static/image/warningClock.png" mode=""></image>
								<text class="use_text">
									{{item.title}}
								</text>
							</view>
							<view class="use_time">
								{{item.ftime}}
							</view>
						</view>
						<view class="use_content">
							{{item.place}}、{{item.event}}
						</view>
					</view>	
				</view>	
			</view>
			<!-- <view class="use_readTop">
				<view v-for="(e,index) in dataListRead" style="width: 100%;padding: 0 16px;box-sizing: border-box;">
					<view class="dateSty">{{e.date}}</view>
					<view v-for="(item,indexs) in e.list" class="useAll">
						<view style="display: flex;justify-content: space-between;">
							<view>
								<image class="use_img" :src="item.img" mode=""></image>
								<text class="use_text">
									{{item.demo1}}
								</text>
							</view>
							<view class="use_time">
								{{item.demo2}}
							</view>
						</view>
						<view class="use_content">
							{{item.demo3}}
						</view>
					</view>	
				</view>	
			</view> -->
			<view v-if="dataList[0].length == 0 || dataList[1].length == 0" style="font-size: 18px;color: #113A62;opacity: 0.65;width: 100%;text-align: center;padding-top: 174px;">
				暂无数据
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import moment from '../../utils/moment.min.js'
	var that;
	export default {
		data() {
			return {
				sysInfo: null, // 系统变量
				tabList:[], // 头部按钮
				warningList:[], // 头部报警过滤按钮
				tabId: null, // 物料柜所点击按钮id
				dataList: [] ,// 报警条件列表
				warningId: null, // 报警条件所点击按钮id
				dataListRead: [] // 已读数据
			}
		},
		onNavigationBarButtonTap(e) {
			console.log('111222',e)
			that.$util.pageTo('index/inventorySearch')
			// uni.scanCode({
			// 	onlyFromCamera: true,
			// 	success: function(res) {
			// 		console.log('res',res.result)
			// 	}
			// });
			
	    },
		onLoad(e) {
			that = this
			that.sysInfo = this.$sys.getSysInfo();
			that.getList()
		},
		methods: {
			getList(){
				// 普通用户
				if(that.sysInfo.froleid == 1){
					that.$http.get('material/useDetail/getUseDetaiSecurity', {
						fsiteNo: that.sysInfo.fsiteNo,
					}).then(e => {
						console.log('e111',e)
						// list[0]：未读，list[1]：已读
						that.dataList = e.list
					}).catch(()=>{
						that.dataList = []
					})
				}else{
					that.$http.get('material/useDetail/getUseDetaiSecurity', {
						fsiteNo: that.sysInfo.fsiteNo,
						userId: that.sysInfo.userId,
					}).then(e => {
						console.log('e111',e)
						that.dataList = e.list
					}).catch(()=>{
						that.dataList = []
					})
				}
				
				// that.dataList=[
				// 		{
				// 			date: '本月',
				// 			list: [
				// 				{
				// 					img:'../../static/image/warningClock.png',
				// 					demo1:'超时未归还警告',
				// 					demo2:'19：23',
				// 					demo3:'上海临港，101号实验室，黄色柜子，仓号6-2， 硫酸一瓶未及时归还。',
				// 				},
				// 				{
				// 					img:'../../static/image/warningClock.png',
				// 					demo1:'超时未归还警告',
				// 					demo2:'19：23',
				// 					demo3:'上海临港，101号实验室，黄色柜子，仓号6-2， 硫酸一瓶未及时归还。',
				// 				},
				// 			]
				// 		},
				// 		{
				// 			date: '本月',
				// 			list: [
				// 				{
				// 					img:'../../static/image/warningClock.png',
				// 					demo1:'超时未归还警告',
				// 					demo2:'19：23',
				// 					demo3:'上海临港，101号实验室，黄色柜子，仓号6-2， 硫酸一瓶未及时归还。',
				// 				},
				// 				{
				// 					img:'../../static/image/warningClock.png',
				// 					demo1:'超时未归还警告',
				// 					demo2:'19：23',
				// 					demo3:'上海临港，101号实验室，黄色柜子，仓号6-2， 硫酸一瓶未及时归还。',
				// 				},
				// 			]
				// 		},
				// 		{
				// 			date: '本月',
				// 			list: [
				// 				{
				// 					img:'../../static/image/warningClock.png',
				// 					demo1:'超时未归还警告',
				// 					demo2:'19：23',
				// 					demo3:'上海临港，101号实验室，黄色柜子，仓号6-2， 硫酸一瓶未及时归还。',
				// 				},
				// 				{
				// 					img:'../../static/image/warningClock.png',
				// 					demo1:'超时未归还警告',
				// 					demo2:'19：23',
				// 					demo3:'上海临港，101号实验室，黄色柜子，仓号6-2， 硫酸一瓶未及时归还。',
				// 				},
				// 			]
				// 		},
				// 	]
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style>
	.use_top{
		background: linear-gradient(267.62deg, rgba(214, 227, 243, 0.46) 8.2%, rgba(255, 255, 255, 0.46) 82.68%),
		linear-gradient(0deg, #E3EDF7, #E3EDF7);
	}
	.use_readTop{
		background: linear-gradient(122.51deg, rgba(214, 227, 243, 0.5) 16.62%, rgba(255, 255, 255, 0.5) 56.74%),
		linear-gradient(0deg, #E3EDF7, #E3EDF7),
		linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
	}
	.useAll{
		width: 100%;
		/* height: 137px; */
		margin: 4px 0 20px 0;
		background: #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		padding: 24px 16px 24px 16px;
		box-sizing: border-box;
	}
	.use_text{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 16px;
		line-height: 24px;
		color: #113A62;
	}
	.use_img{
		max-width: 16px;
		max-height: 16px;
		vertical-align:middle;
		margin: -5px 10px 0 0;
	}
	.use_content{
		/* Text */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		color: #113A62;
		opacity: 0.9;
		white-space: break-spaces;
		word-break: break-all;
	}
	.use_time{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 22px;
		color: #113A62;
		opacity: 0.7;
	}
	.dateSty{
		/* Subtitle */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 14px;
		height: 30px;
		line-height: 30px;
		color: #113A62;
		opacity: 0.6;
	}
	.title{
		/* Text */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		/* identical to box height, or 150% */
		color: #113A62;
		width: 100%;
		text-align: center;
		padding-top: 3px;
	}
</style>
